<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="plugin/header/header.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="plugin/captionHover/captionHover.css">
    <link rel="stylesheet" href="plugin/menu/bootsnav.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title><@spring.message 'upload.title' /></title>
    <style type="text/css">
        .content {
            background-image: url("../img/index/intro-bg.jpg");
            height: 970px;
            padding: 100px 80px;
        }

        .content-inner {
            width: 100%;
            height: 200px;
        }

        .content-inner-task {
            height:200px;
            width : 14.28%;
            border: 1px solid #ddd;
            float: left;
            border-radius:10px;
        }

        .content-inner-task:hover{
            transform: scale(1.1);
            zoom: 1;
        }

        .content-inner-info {
            width: 100%;
            height: 500px;
            background-color: #f2f2f2;
            border-radius: 15px;
            margin-top:30px;
        }


        /* 轮播按钮  */
        .next_button,
        .prev_button {
            position: absolute;
            top: 20% !important;
            margin: -15px 0 0 -25px !important;
            width: 50px !important;
            height: 50px !important;
            border: 1px solid #000 !important;
            background: #fff !important;
            opacity: 0.5 !important;
            z-index: 5000 !important;
            cursor: pointer;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .next_button {
            right: 3% !important;
        }

        .next_button:hover,
        .prev_button:hover {
            opacity: 1 !important;
        }
        .next_button:after,
        .prev_button:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1px;
            height: 1px;
            margin-top: -10px;
        }

        .next_button:after {
            border-left: 15px solid #000;
            border-right: 15px solid transparent;
            border-bottom: 10px solid transparent;
            border-top: 10px solid transparent;
            margin-left: -5px;
        }

        .prev_button:after {
            border-right: 15px solid #000;
            border-left: 15px solid transparent;
            border-bottom: 10px solid transparent;
            border-top: 10px solid transparent;
            margin-left: -25px;
        }

        .page-header {
            margin: 0 10px;
        }
    </style>
</head>
<body style="height:970px;">
<header class="header-navigation" id="header">
    <#include "menu.ftl">
</header>
<div class="content">
    <div class="content-inner">

    </div>
    <div class="content-inner-info">

        <center>
            <br>
        <h3><@spring.message 'upload.import.phone' /><font color="blue" id="fontid"></font></h3>

        <br>
            <div class="container" style="margin-top: 30px;margin-bottom: 30px">
                <div class="row">
                    <div class="span12">

                        <div class="well">
                            <form role="form"  id="form_table" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <input type="file" name="filename" id="file">
                                            <input type="hidden" name="account" value="" class="account">
                                        </div>
                                    </div>

                                    <div class="col-xs-2">
                                        <div class="form-group">
                                            <button type="button" class="btn btn-primary" onclick="check()">
                                                <span class="glyphicon glyphicon-ok"></span><@spring.message 'upload.button.import' />
                                            </button>


                                        </div>
                                    </div>

                                    <div class="col-xs-3">
                                        <span id="loading" style="display: none;"><img src="picture/jumpstart-load.gif" width="60px;"></span>
                                        <span id="errormsg" style="color: red;"></span>
                                        <span id="successmsg" style="color: green;"></span>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <h1><a href="/model/<@spring.message 'upload.download.model.name' />.xlsx" target="_self" style="color: red"><@spring.message 'upload.download.model' /></a></h1>
        </center>
    </div>


</div>
</body>
<#include "includeftl/layui.ftl">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="plugin/header/header.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="plugin/menu/bootsnav.js"></script>
<script src="plugin/captionHover/captionHover.js"></script>
<#include "includeftl/upload.ftl">
<#include "includeftl/upload.bootstrap-filestyle.min.ftl">

<script>
    function check() {

        if($("#fontid").text() ==""){
            $("#successmsg").html("");
            $("#errormsg").html("<@spring.message 'upload.file.error1' />");
            $("html").animate({scrollTop: 0},0);
            return;
        }
        if($("#file").val() == ""){
            $("#successmsg").html("");
            $("#errormsg").html("<@spring.message 'upload.file.error2' />");
            return;
        }
        var fd = new FormData($("#form_table")[0]);
        $("#loading").show();
        $.ajax({
            url: "/upload/batchImport",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
            success : function(data) {
                $("#loading").hide();
                if (data.flag == 0){
                    $("#successmsg").html("");
                    $("#errormsg").html("<@spring.message 'upload.error0' />");
                }else if (data.flag == 1){
                    $("#successmsg").html("");
                    $("#errormsg").html("<@spring.message 'upload.error1' />");
                }else if (data.flag == 2){
                    $("#errormsg").html("");
                    $("#successmsg").html("<@spring.message 'upload.success0' />&nbsp;"+data.num+"&nbsp;<@spring.message 'upload.success1' />");
                }
            },
            error : function(data) {
                alert("<@spring.message 'upload.net.error' />")
                $("#loading").hide();
            }
        });

    }

    $('#file').filestyle({
        buttonName : 'btn-warning'
    });
    
</script>
</html>